:root {
    --main-color: #6683FB;
  }
  
  /* display */
  .dn{display:none;}
  .di{display: inline;}
  .db{display: block;}
  .dib{display: inline-block;}
  
  /* position */
  .rel{position:relative;}
  .abs{position:absolute;}
  .abs_full{position:absolute;left:0;right:0;top:0;bottom:0;}
  
  /* height */
  .height30{height: 30px;}
  .height35{height: 35px;}
  .height40{height: 40px;}
  .height50{height: 50px;}
  .height60{height: 60px;}
  .height70{height: 70px;}
  .height80{height: 80px;}
  .height105{height: 105px;}
  .height100{height: 100px;}
  .height110{height: 110px;}
  .height120{height: 120px;}
  .height100vh{height: 100vh;}
  .pct_height100{height: 100%;}
  .pct_height90{height: 90%;}
  .pct_height80{height: 80%;}
  
  /* width */
  .width1em{width: 1em;}
  .width2em{width: 2em;}
  .width3em{width: 3em;}
  .width4em{width: 4em;}
  .width5em{width: 5em;}
  .width6em{width: 6em;}
  .width7em{width: 7em;}
  .width8em{width: 8em;}
  .width10em{width: 10em;}
  
  /* percent width value */
  .pct10{width:10%;}
  .pct15{width:15%;}
  .pct20{width:20%;}
  .pct25{width:25%;}
  .pct30{width:30%;}
  .pct33{width:33.3%;}
  .pct40{width:40%;}
  .pct50{width:50%;}
  .pct60{width:60%;}
  .pct66{width:66.6%;}
  .pct70{width:70%;}
  .pct75{width:75%;}
  .pct80{width:80%;}
  .pct90{width:90%;}
  .pct100{width:100%;}
  
  /* line-height */
  .lh1{line-height: 1;}
  .lh11{line-height: 1.1;}
  .lh15{line-height: 1.5;}
  .lh18{line-height: 1.8;}
  .lh2{line-height: 2;}
  
  .lh30{line-height: 30px;}
  .lh40{line-height: 40px;}
  .lh50{line-height: 50px;}
  .lh60{line-height: 60px;}
  .lh70{line-height: 70px;}
  
  /* margin */
  .m0{margin: 0;}
  .m5{margin: 5px;}
  .m10{margin: 10px;}
  .m20{margin: 20px;}
  .m30{margin: 30px;}
  .mH5{margin-left: 5px;margin-right: 5px;}  /* mH表示水平方向上的margin,包括margin-left, margin-right */
  .mH10{margin-left: 10px;margin-right: 10px;}
  .mH20{margin-left: 20px;margin-right: 20px;}
  .mH30{margin-left: 30px;margin-right: 30px;}
  .mV2{margin-top: 2px;margin-bottom: 2px;}  /* mV表示垂直方向上的margin, 包括margin-top, margin-bottom */
  .mV5{margin-top: 5px;margin-bottom: 5px;}  /* mV表示垂直方向上的margin, 包括margin-top, margin-bottom */
  .mV10{margin-top: 10px;margin-bottom: 10px;}
  .mV15{margin-top: 15px;margin-bottom: 15px;}
  .mV20{margin-top: 20px;margin-bottom: 20px;}
  .mV30{margin-top: 30px;margin-bottom: 30px;}
  .mV40{margin-top: 40px;margin-bottom: 40px;}
  .mV50{margin-top: 50px;margin-bottom: 50px;}
  .mt5{margin-top: 5px;}
  .mt10{margin-top: 10px;}
  .mt20{margin-top: 20px;}
  .mt30{margin-top: 30px;}
  .mt40{margin-top: 40px;}
  .mt50{margin-top: 50px;}
  .mb0{margin-bottom: 0;}
  .mb5{margin-bottom: 5px;}
  .mb8{margin-bottom: 8px;}
  .mb10{margin-bottom: 10px;}
  .mb15{margin-bottom: 15px;}
  .mb20{margin-bottom: 20px;}
  .mb30{margin-bottom: 30px;}
  .mb40{margin-bottom: 40px;}
  .mb50{margin-bottom: 50px;}
  .ml2{margin-left: 2px;}
  .ml5{margin-left: 5px;}
  .ml8{margin-left: 8px;}
  .ml10{margin-left: 10px;}
  .ml20{margin-left: 20px;}
  .ml25{margin-left: 25px;}
  .ml30{margin-left: 30px;}
  .ml40{margin-left: 40px;}
  .ml5{margin-left: 5px;}
  .mr2{margin-right: 2px;}
  .mr5{margin-right: 5px;}
  .mr8{margin-right: 8px;}
  .mr10{margin-right: 10px;}
  .mr15{margin-right: 15px;}
  .mr20{margin-right: 20px;}
  .mr30{margin-right: 30px;}
  
  /* padding */
  .p0{padding: 0;}
  .p01{padding: 0.1px;}
  .p5{padding: 5px;}
  .p10{padding: 10px;}
  .p16{padding: 16px;}
  .p20{padding: 20px;}
  .p30{padding: 30px;}
  .pH0{padding-left: 0!important;padding-right: 0!important;}
  .pH2{padding-left: 2px;padding-right: 2px;}
  .pH5{padding-left: 5px;padding-right: 5px;}  /* pH表示水平方向上的padding,包括padding-left, padding-right */
  .pH10{padding-left: 10px;padding-right: 10px;}
  .pH20{padding-left: 20px;padding-right: 20px;}
  .pH30{padding-left: 30px;padding-right: 30px;}
  .pH40{padding-left: 40px;padding-right: 40px;}
  .pV5{padding-top: 5px;padding-bottom: 5px;}  /* pV表示垂直方向上的padding, 包括padding-top, padding-bottom */
  .pV10{padding-top: 10px;padding-bottom: 10px;}
  .pV20{padding-top: 20px;padding-bottom: 20px;}
  .pV30{padding-top: 30px;padding-bottom: 30px;}
  .pt5{padding-top: 5px;}
  .pt10{padding-top: 10px;}
  .pt20{padding-top: 20px;}
  .pt30{padding-top: 30px;}
  .pb5{padding-bottom: 5px;}
  .pb10{padding-bottom: 10px;}
  .pb20{padding-bottom: 20px;}
  .pb30{padding-bottom: 30px;}
  .pl2{padding-left: 2px;}
  .pl5{padding-left: 5px;}
  .pl8{padding-left: 8px;}
  .pl10{padding-left: 10px;}
  .pl20{padding-left: 20px;}
  .pl30{padding-left: 30px;}
  .pl40{padding-left: 40px;}
  .pl5{padding-left: 5px;}
  .pr2{padding-right: 2px;}
  .pr5{padding-right: 5px;}
  .pr8{padding-right: 8px;}
  .pr10{padding-right: 10px;}
  .pr20{padding-right: 20px;}
  .pr30{padding-right: 30px;}
  
  /* top, bottom */
  .top_15{top: -15px;}
  .top0{top: 0;}
  .top30{top: 30px;}
  .top40{top: 40px;}
  .top50{top: 50px;}
  .top60{top: 60px;}
  .top70{top: 70px;}
  .top80{top: 80px;}
  .top100{top: 100px;}
  .top110{top: 110px;}
  .top120{top: 120px;}
  .top150{top: 150px;}
  .bottom0{bottom: 0;}
  .bottom50{bottom: 50px;}
  .bottom60{bottom: 60px;}
  .bottom70{bottom: 70px;}
  
  /* border-color */
  .border-c{border: 1px solid #ccc;}
  .border-d{border: 1px solid #ddd;}
  .border-e{border: 1px solid #eee;}
  .border-info{border: 1px solid #409EFF;}
  .border-warn{border: 1px solid #F49500;}
  .border-success{border: 1px solid #04B479;}
  .border-none{border: none!important;}
  .border-c__dashed{border: 1px dashed #ccc;}
  .bottom-c__dashed{border-bottom: 1px dashed #ccc;}
  
  /* bottom-1px */
  .bottom-c{border-bottom: 1px solid #ccc;}
  .bottom-d{border-bottom: 1px solid #ddd;}
  .bottom-e{border-bottom: 1px solid #eee;}
  
  
  /* 点击无框文本框文本域 */
  .outline-none{ outline:none;}
  
  /*background-color*/
  .bg-white{background-color: #fff;}
  .bg-default{background-color: #DDDEDF;}
  .bg-info{background-color: var(--main-color);}
  .bg-warn{background-color: #F49500;}
  .bg-danger{background-color: #F56C6C;}
  .bg-success{background-color: #04B479;}
  .bg-skyOrange{background-color: #FFCF68;}
  .bg-lightgray{background-color: #FAFAFA;}
  .bg-gray{background-color: #666;}
  
  /* color */
  .color-gray{color: #606266;}
  .color-white{color: #fff;}
  .color-info{color: var(--main-color);}
  .color-warn{color:#FFB517;}
  .color-success{color: #4CBD84;}
  .color-danger{color: #FF5E5E;}
  .color-l{color: rgba(0, 0, 0, 0.4);}
  .color-d{color: rgba(0, 0, 0, 0.8);}
  .color-theme{color: #4C8CC3;}
  .color-green-light{color: #5CEDD6}
  .color-green{color: #67C23A;}
  .color-purple{color: #7D83FD;}
  .color-default{color: #8F8F8F;}
  .color-black{color:#333}
  .color-lightGray{color: #999;}
  .color-oGray{color: #666;}
  
  /* font-size */
  .f0{font-size:0;}
  .f10{font-size:10px;}
  .f12{font-size:12px;}
  .f13{font-size:13px;}
  .f14{font-size:14px;}
  .f15{font-size:15px;}
  .f16{font-size:16px;}
  .f17{font-size:17px;}
  .f18{font-size:18px;}
  .f19{font-size:19px;}
  .f20{font-size:20px;}
  .f22{font-size:22px;}
  .f24{font-size:24px;}
  .f26{font-size:26px;}
  .f30{font-size:30px;}
  
  /* font-weight */
  .fw200{font-weight: 200;}
  .fw300{font-weight: 300;}
  .fw400{font-weight: 400;}
  .fw500{font-weight: 500;}
  .fw600{font-weight: 600;}
  
  /* text-align */
  .tc{text-align:center;}
  .tr{text-align:right;}
  .tl{text-align:left;}
  .tj{text-align:justify;}
  
  /* text-decoration */
  .tdl, .tdl:hover{text-decoration:underline;}
  .tdn,.tdn:hover,.tdn a:hover,a.tdn:hover{text-decoration:none;}
  
  /* white-space */
  .nowrap{white-space:nowrap;}
  
  /* word-wrap */
  .bk{word-wrap:break-word;}
  
  /* vertical-align */
  .vt{vertical-align:top;}
  .vb{vertical-align:bottom;}
  .vm{vertical-align:middle;}
  .vtb{vertical-align:text-bottom;}
  
  /* float */
  .fl{float:left;}
  .fr{float:right;}
  
  /* overflow */
  .ovh{overflow:hidden;}
  .ova{overflow:auto;}
  
  
  /* opacity */
  .opacity0{opacity: 0;}
  .opacity5{opacity: 0.5;}
  .opacity6{opacity: 0.6;}
  .opacity7{opacity: 0.7;}
  .opacity8{opacity: 0.8;}
  .opacity9{opacity: 0.9;}
  
  /* visibility */
  .vh{visibility:hidden;}
  .vv{visibility:visible;}
  
  /* 居中 */
  .auto{margin-left:auto; margin-right:auto;}  /* 块状元素水平居中 */
  .dib-vm{display:inline-block; width:0; height:100%; vertical-align:middle;} /* 大小不定元素垂直居中 */
  .abs-center{position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);} /* 大小不定的绝对子元素居中 */
  
  
  /* flex布局 flex_row横向排列  flex_column纵向排列  后两个词表示主轴和次副轴的排列方式 */
  .flex_row-center{display: flex;  align-items: center; justify-content: center;}
  .flex_row-center-start{display: flex;  align-items: flex-start;  justify-content: center;}
  .flex_row-center-end{display: flex;  align-items: flex-end;  justify-content: center;}
  .flex_row-between{display: flex;  align-items: center;  justify-content: space-between;}
  .flex_row-between-start{display: flex;  align-items: flex-start;  justify-content: space-between;}
  .flex_row-between-end{display: flex;  align-items: flex-end;  justify-content: space-between;}
  .flex_row-start {display: flex; align-items: center; justify-content: flex-start;}
  .flex_row-end {display: flex; align-items: center; justify-content: flex-end;}
  .flex_column-center{display: flex;  flex-direction: column; align-items: center; justify-content: center;}
  .flex_column-center-start{display: flex;  flex-direction: column; align-items: flex-start; justify-content: center;}
  .flex_column-center-end{display: flex;  flex-direction: column; align-items: flex-end; justify-content: center;}
  .flex_column-between{display: flex;  flex-direction: column; align-items: center; justify-content: space-between;}
  .flex_column-between-start{display: flex;  flex-direction: column; align-items: flex-start; justify-content: space-between;}
  .flex_column-between-end{display: flex;  flex-direction: column; align-items: flex-end; justify-content: space-between;}
  .shrink0{flex-shrink: 1;}
  .inline-flex{display: inline-flex;}
  
  /* flex布局下子元素所占比例 */
  .flex1{flex: 1;}
  .flex2{flex: 2;}
  .flex3{flex: 3;}
  .flex4{flex: 4;}
  .flex5{flex: 5;}
  .flex1em{flex: 0 0 1em; width: 1em;}
  .flex2em{flex: 0 0 2em; width: 2em;}
  .flex3em{flex: 0 0 3em; width: 3em;}
  .flex4em{flex: 0 0 4em; width: 4em;}
  .flex5em{flex: 0 0 5em; width: 5em;}
  .flex6em{flex: 0 0 6em; width: 6em;}
  .flex7em{flex: 0 0 7em; width: 7em;}
  .flex8em{flex: 0 0 8em; width: 8em;}
  .flex9em{flex: 0 0 9em; width: 9em;}
  .flex10em{flex: 0 0 10em; width: 10em;}
  
  
  /* border-radius */
  .br2{border-radius: 2px;}
  .br5{border-radius: 5px;}
  .br8{border-radius: 8px;}
  .br10{border-radius: 10px;}
  .br12{border-radius: 12px;}
  .br20{border-radius: 20px;}
  .br50{border-radius: 50%;}
  .btr10{border-top-left-radius: 10px;border-top-right-radius: 10px;}
  
  /* 清除浮动 */
  .clearfix{*zoom:1;}
  .clearfix:after{content: '';  display: block;  clear: both;  height: 0;}
  
  /* 基于display:table-cell的自适应布局 */
  /* .cell{display:table-cell; display:inline-block; width:auto;} */
  
  /* 单行文字溢出虚点显示 */
  .ell{text-overflow:ellipsis; white-space:nowrap; overflow:hidden;}
  /* 单行文字溢出虚点显示 */
  .ovMoreLine {display: -webkit-box;/*哪里用和这个属性哪里规定行数、*//*-webkit-line-clamp:2;*/overflow: hidden;text-overflow: ellipsis;-webkit-box-orient: vertical;}
  
  .twoEll { display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;overflow: hidden; }
  
  .zindex999{z-index: 999;}
  .zindex50{z-index: 50;}
  
  /*opacity*/
  .opacity0{opacity: 0;}
  
  /*ul list-style: none*/
  .lsn{list-style: none;}
  
  /*cursor*/
  .cursorp{cursor: pointer}
  .cursora{cursor: alias}
  .cursor_notallowed{cursor: not-allowed}
  
  .hover-color:hover{color: #409EFF;}
  .hover-bgcolor:hover{background-color: #F5F7FB;}
  
  
  .extend-click {position: relative;}
  .extend-click:after{content: '';position: absolute;top: -10px;left: -10px;right: -10px;bottom: -10px;}
  .bbox{box-sizing: border-box;}
  .cbox{box-sizing: content-box;}
  
  /* 盒子阴影 */
  .box-shadow { box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04); }
  .bshadow {box-shadow: 0 0 5px rgba(0, 0, 0, 0.08);}
  
  /* 文本自动对齐 */
  .text-align {text-align: justify;text-align-last: justify;}
  /* 文字缩进两个 */
  .text-indent{text-indent: 2em};
  /* 滤镜灰色 */
  .filterGray {filter: grayscale(100%);}
  
  .f12rem {font-size: 0.75rem;}
  .f14rem {font-size: 0.875rem;}
  .f15rem {font-size: 0.9375rem;}
  .f16rem {font-size: 1rem;}
  .f17rem {font-size: 1.0625rem;}
  .f18rem {font-size: 1.125rem;}
  .f20rem {font-size: 1.25rem;}
  .f21rem {font-size: 1.3125rem;}
  .f22rem {font-size: 1.375rem;}
  .f24rem {font-size: 1.5rem;}
  
  .p5rem{padding: 0.3125rem;}
  .p10rem{padding: 0.625rem;}
  .p16rem{padding: 1rem;}
  .p20rem{padding: 1.25rem;}
  .pH20rem{padding-left: 1.25rem;padding-right: 1.25rem;}
  .pH10rem{padding-left: 0.625rem;padding-right: 0.625rem;}
  .pH15rem{padding-left: 0.9375rem;padding-right: 0.9375rem;}
  .pH16rem{padding-left: 1rem;padding-right: 1rem;}
  .pV10rem{padding-top: 0.625rem;padding-bottom: 0.625rem;}
  .pt10rem{padding-top: 0.625rem;}
  .pt20rem{padding-top: 1.25rem;}
  .pr20rem{padding-right: 1.25rem;}
  .pl30rem{padding-left: 1.875rem;}
  .pb10rem{padding-bottom: 0.625rem;}
  .pb5rem{padding-bottom: 0.3125rem;}
  
  .m16rem {margin: 1rem;}
  .mH15rem {margin-right: 0.9375rem;margin-left: 0.9375rem;}
  .mH16rem {margin-right: 1rem;margin-left: 1rem;}
  .mH30rem {margin-left: 1.875rem;margin-right: 1.875rem;}
  .mV16rem {margin-top: 1rem;margin-bottom: 1rem;}
  .mV10rem {margin-top: .625rem;margin-bottom: .625rem;}
  .mt5rem {margin-top: 0.3125rem;}
  .mt10rem {margin-top: 0.625rem;}
  .mt15rem {margin-top: 0.9375rem;}
  .mt16rem {margin-top: 1rem;}
  .mt20rem {margin-top: 1.25rem;}
  .mt30rem {margin-top: 1.875rem;}
  .mb5rem {margin-bottom: 0.3125rem;}
  .mb10rem {margin-bottom: 0.625rem;}
  .mb15rem {margin-bottom: 0.9375rem;}
  .mb30rem {margin-bottom: 1.875rem;}
  .mr10rem {margin-right: 0.625rem;}
  .mr15rem {margin-right: .9375rem;}
  .mr20rem {margin-right: 1.25rem;}
  .ml10rem {margin-left: 0.625rem;}
  .ml5rem {margin-left: 0.3125rem;}
  
  